<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人信息</title>
    <meta charset="UTF-8">
    <title>用户个人信息</title>
    <style type="text/css">
    * {
    margin     : 0;
    padding    : 0;
    box-sizing : border-box;
    color      : #334e64;
    font-family: 'Montserrat', sans-serif;
}

body {
    min-height     : 100vh;
    width          : 100%;
    display        : flex;
    justify-content: center;
    align-items    : center;
    background     : linear-gradient(20deg, #c3e7fc, #013c8a);
}

.profile-container {
    position        : relative;
    background-color: #fff;
    width           : 350px;
    padding         : 100px 50px 40px;
    border-radius   : 12px;
    box-shadow      : 0 0 60px 5px rgba(0, 0, 0, 0.2);
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
}

.img-container {
    width        : 130px;
    height       : 130px;
    overflow     : hidden;
    border       : 5px solid #b92a76;
    border-radius: 50%;
    box-shadow   : 0 8px 55px #b92a76a4;
    position     : absolute;
    top          : 0;
    left         : 50%;
    transform    : translate(-50%, -50%);
}

.img-container img {
    width    : 100%;
    max-width: 100%;
    transform: scale(1.1);
}

.info {
    margin-bottom: 12px;
    margin-top: 8px;
}

.info i {
    margin-right: 8px;
    font-size   : 1.1em;
}

.place {
    margin-bottom: 12px;
}

.full-name {
    font-size     : 1.4em;
    font-weight   : bold;
    letter-spacing: 1px;
    color         : #4680fd;
}
.sex{
    margin-top: 6px;
}
.birthday{
    margin-top: 6px;
}
.place {
    margin-bottom: 40px;
}

.full-name {
    font-size     : 1.4em;
    font-weight   : bold;
    letter-spacing: 1px;
    color         : #b92a76;
}

.posts-info {
    width          : 100%;
    display        : flex;
    justify-content: space-around;
    align-items    : center;
    font-size      : 1.1em;
    letter-spacing : 0.5px;
    margin-bottom  : 30px;
    text-align     : center;
}

.posts-info span {
    display      : block;
    font-weight  : bold;
    margin-bottom: 4px;
}

.social-container {
    width          : 100%;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 20px;
}

.social-container i {
    color: #fff;
}

.social-container button {
    border          : none;
    outline         : none;
    width           : 45px;
    height          : 45px;
    border-radius   : 50%;
    font-size       : 1.2em;
    cursor          : pointer;
    box-shadow      : 0px 5px 25px rgba(0, 0, 0, 0.15);
    transition      : transform 0.3s;
}

.social-container button:hover {
    transform: scale(1.1);
}
.social-container button.qq {
    background: linear-gradient(45deg, #74D2FF, #0098FF);
}

.social-container button.weixin {
    background: linear-gradient(45deg, #8BFF9A, #4EE214);
}

.social-container button.youtube {
    background: linear-gradient(45deg, #e6683ccc 25%, #dc2743 50%,
            #bc1888 100%);
}

.social-container button.github {
    background: linear-gradient(45deg, #33333388, #333333);
}

.action {
    outline: none;
    cursor: pointer;
    color: #fff;
    background-color: #f06d9d;
    border: none;
    border-radius: 50px;
    padding: 12px 20px;
    width: 80%;
    margin-top: 25px;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.action.message {
    background-color: #a995f7;
}

.action:hover {
    transform: scale(1.05);
    opacity: 0.85;
}
.action.message:hover {
    transform: scale(1.05);
    opacity: 0.85;
}
a:hover{
    color: rgb(137, 163, 240);
}
a::before{
    content: '[';
}
a::after{
    content: ']';
}
a{
    font-size: 28px;
    text-align: center;
    line-height: 50px;
}
.hitokoto{
    position        : relative;
    background-color: #fff;
    width           : 350px;
    padding         : 100px 50px 40px;
    border-radius   : 12px;
    box-shadow      : 0 0 60px 5px rgba(0, 0, 0, 0.2);
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    background-color: rgb(235, 248, 253);
}
    </style>
</head>
<body>
    <div class="profile-container">
        <div class="img-container">
            <img src="hero无畏.png">
        </div>
        <p class="info full-name">杨涛</p>
        <p class="info role">
            <i class="fas fa-star"></i>
            南京hero久竞 无畏
        </p>
        <p class="info place">
            <i class="fas fa-map-marker-alt"></i>
            福建莆田，中国
        </p>
        <p class="info sex">
            男
        </p>
        <p class="info birthday">
            2001年9月11日
        </p>
        <p class="info information"> 
            南京hero久竞俱乐部小队长
        </p>
        <div class="social-container">
                <button class="qq">
                    <i class="fab fa-qq"></i>
                </button>
                <button class="weixin">
                    <i class="fab fa-weixin"></i>
                </button>
                <button class="youtube">
                    <i class="fab fa-youtube"></i>
                </button>
                <button class="github">
                    <i class="fab fa-github"></i>
                </button>
            </div>

        <button class="action"><a href="https://xu-zhouyu.gitee.io/weather/weather/change.html">信息修改</a></button>
        <button class="action message"><a href="https://xu-zhouyu.gitee.io/weather/weather/index.html">返回首页</a></button>
    </div>
    <div class="hitokoto">
        <p>
            <a href="#" id="hitokoto_text">:D 获取中...</a>
        </p>
        <script>
        fetch('https://v1.hitokoto.cn')
        .then(response => response.json())
        .then(data =>{
            const hitokoto=document.querySelector('#hitokoto_text')
            hitokoto.herf='https://hitokoto.cn/?uuid=${data.uuid}'
            hitokoto.innerText=data.hitokoto
        })
        .catch(Console.error)
        </script>
    </div>
    
</body>
</html>